<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> -->
  <title>檀木高精度定位</title>
  <!-- #leftPane {position:absolute; width:20%; height:100%; top:0; left: 0; background: #4d4042;} -->
  <style>
    html, body {width:  100%; height: 100%; margin: 0px; background: #FFFFFF; font-family: Tahoma, Geneva, Arial, sans-serif;}
    /*#header {position: fixed; width: 30%; height: 70px; background: #00487f; color: white; vertical-align: middle;line-height: 70px}*/
    /*#header-2 {position: fixed;top:0px; left: 180px; background: #00487f; width: 80%; height: 40px; color: white; vertical-align: middle;line-height: 70px}*/
    #container {position: fixed; width: 100%; top:70px; bottom: 35px; overflow: auto;}
    #footer {position: fixed; width: 100%; height: 35px; bottom: 0px; background: #fff; color: white;top:0px;left:10px;}

    #mapSwitcher {position:absolute; width: 100%; padding-left: 50%;}
    #tagContainer {position:absolute; width:100%; height:100%; top:0; left: 0; background: #111111; overflow-y:scroll;}
    #mapContainer {position:absolute; top:0; right:0; width:100%; height:100%;}
    #show2DMap {position: absolute; bottom: 10px; left: 10px; }
    #show3DMap {position: absolute; bottom: 10px; left: 90px; }
    .mapSwitcherButton {border-radius:5px; border-width:1px; width: 70px; border-color: #FFFFFF;}
    .mapPanel {position:absolute; width:100%; height:100%;}
    .mapPanel1 {position:absolute; width:100%; height:100%;}
    canvas { width: 100%; height: 100% }
    #zoomIn {position: absolute; top: 5px; left: 5px; }
    #zoomOut {position: absolute; top: 55px; left: 5px; }
    #rotateCW {position: absolute; top: 5px; left: 55px; }
    #rotateCCW {position: absolute; top: 55px; left: 55px; }
    #drawer { top: 50%; left: 0px; }
    #LogoSlogan {position: absolute; bottom: 10px; right: 10px; opacity: 0.2; height:150px;}
    .inputContainer {position: absolute; padding:3px; margin: 3px; width: 200px; height: 20px; -webkit-border-radius:4px;
      -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
      box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #f8f8f8; border:none; outline:none;}

    #tagIDFilter { left: 210px; }
    #tagFieldFilter { left: 420px; }
    #positionOptimize {position: absolute; right: 30px; padding:3px; margin: 3px; height: 30px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background: #f8f8f8; border:1px solid #aaa; outline:none;}
    #tagSortButton {position: absolute; left: 630px; padding:3px; margin: 3px; height: 30px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background: #f8f8f8; border:1px solid #aaa; outline:none;}
    #coordSysContainer {  }
    #coordSysSelect { position: absolute; right: 2px; border:none; outline:none; background: inherit; width: 80%; cursor:pointer;}


    #notificationBar {position: absolute; top: 90%; left: 0px; width: 100%; height: 40px; background: rgba(255,0,0,0.1); color:white; text-align: center; line-height: 35px; display:none; font-size:25px}
    #alarmBox_1 {position: absolute; top: 0; right: 0px; width: 25%; height: 0px; background: rgba(255,0,0,0.9); color:white; text-align: center; line-height: 25px; display:none; font-size:20px}
    #alarmBox_2 {position: absolute; top: 80px; right: 0px; width: 25%; height: 0px; background: rgba(255,120,0,0.9); color:white; text-align: center; line-height: 25px; display:none; font-size:20px}
    #AlarmBox_3 {position: absolute; top: 160px; right: 0px; width: 25%; height: 0px; background: rgba(255,0,0,0.9); color:white; text-align: center; line-height: 25px; display:none; font-size:20px}

    .tagRow {color: white; padding: 3px 3px 3px 5px; }
    .tagLabel {color: #aaaaaa; font-weight:bold;}
    .tagInfoRow {background: #444; margin-left: 5px; padding-left: 5px; border-left-color: #00CCFF; border-width: 0px 0px 0px 5px; border-style: solid;}
    .tagLocationRow {background: #444; margin-left: 5px; padding-left: 5px; border-left-color: #77DD77; border-width: 0px 0px 0px 5px; border-style: solid;}
    .colorbox { float: left; width: 13px; height: 13px; background: red; margin: 2px 5px 0px 0px;
      border-radius: 50%;  border-width: 2px; border-style: solid; /* animation: border-pulsate 2s infinite; */}

    #buttons {position:absolute; width: 100%; text-align:center; z-index:1000;}
    button { font-family:georgia; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:5px; border-width:1px; border-color: #FFFFFF; z-index:1000; }
    button:hover { background:#333 }
    button.selected { background:#333 }

    #mapPanel canvas {
      -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
      -moz-animation: fadein 2s; /* Firefox < 16 */
      -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera < 12.1 */
      animation: fadein 2s;
    }
    #mapPanel1 canvas {
      -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
      -moz-animation: fadein 2s; /* Firefox < 16 */
      -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera < 12.1 */
      animation: fadein 2s;
    }
    @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

  </style>
  <!--可无视 弹框样式-->
<!--  <link rel="stylesheet" type="text/css" href="/css/alert/normalize.css" />-->
<!--  <link rel="stylesheet" type="text/css" href="/css/alert/reset.css">-->
<!--  &lt;!&ndash;核心样式&ndash;&gt;-->
<!--  <link rel="stylesheet" type="text/css" href="/css/alert/style.css"/>-->
<!--  &lt;!&ndash;核心样式&ndash;&gt;-->
<!--  <link href="/css/bootstrap.min.css" rel="stylesheet"/>-->
  <!--  &lt;!&ndash; bootstrap-table 表格插件样式 &ndash;&gt;-->
  <th:block th:include="include :: header('轨迹回放')" />
  <th:block th:include="include :: datetimepicker-css" />
</head>
<body>

<div id="footer">
  <div class="row">
    <div class="col-sm-12 search-collapse">
      <form id="formId">
        <div class="select-list">
          <ul>
            <li>
              标签ID：<input type="text" id="tagId" name="tagId"/>
            </li>

            <li>
              时间：<input type="text" id="newDate"/>
            </li>

            <li class="select-time">
              <label>创建时间： </label>
              <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
              <span>-</span>
              <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
            </li>
            <li>
            <input type="text" id="beginTime" name="beginTime"/>
            </li>
            <li>
              <a class="btn btn-primary btn-rounded btn-sm" onclick="track()"><i class="fa fa-search"></i>&nbsp;搜索</a>
              <a class="btn btn-warning btn-rounded btn-sm" onclick=""><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </li>
          </ul>
        </div>
      </form>
    </div>
  </div>
</div>

<!--<div class="container-div"  style="z-index: 0;margin-top: 0px ">-->
<!--  <div class="row">-->
<!--    <div class="col-sm-12 search-collapse">-->
<!--      <form id="formId">-->
<!--        <div class="select-list">-->
<!--          <ul>-->
<!--            <li>-->
<!--              基站ID：<input type="text" name="locatorId"/>-->
<!--            </li>-->

<!--            <li>-->
<!--              MAC：<input type="text" name="mac"/>-->
<!--            </li>-->

<!--            <li class="select-time new">-->
<!--              <label class="font-noraml">创建时间：</label>-->
<!--              <div class="input-daterange input-group">-->
<!--                <input type="text" class="input-sm form-control" id="startTime" placeholder="开始时间" name="params[beginTime]"/>-->
<!--                <span>-</span>-->
<!--                <input type="text" class="input-sm form-control" id="endTime" placeholder="结束时间"  name="params[endTime]"/>-->
<!--              </div>-->
<!--            </li>-->
<!--            <li>-->
<!--              <a class="btn btn-primary btn-rounded btn-sm" onclick=""><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--              <a class="btn btn-warning btn-rounded btn-sm" onclick=""><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </form>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<div id="container">
  <div id="leftPane" style="display: none">
    <div id="tagContainer"></div>
  </div>
  <div id="mapContainer">
    <div id="mapPanel" class="mapPanel"></div>
    <img id="LogoSlogan"  th:src="@{/img/images/white_tm.png}" style="height: 105px"></img>
    <img id="zoomIn"  th:src="@{/img/images/zoomInButton.png}"></img>
    <img id="zoomOut"  th:src="@{/img/images/zoomOutButton.png}"></img>
    <img id="rotateCW"  th:src="@{/img/images/rotateCWButton.png}"></img>
    <img id="rotateCCW"  th:src="@{/img/images/rotateCCWButton.png}"></img>
    <img id="drawer" th:src="@{/img/images/drawerHandle.png}" style="display: none"></img>
    <img id="people" th:src="@{/img/images/people-2.png}" style="display: none"></img>
    <img id="people3" th:src="@{/img/images/people-4.png}" style="display: none"></img>
    <div id="notificationBar"></div>
    <div id="alarmBox_1"></div>
    <div id="alarmBox_2"></div>
    <div id="AlarmBox_3"></div>
<!--    <button id="show2DMap" class="mapSwitcherButton"><img  th:src="@{/img/images/2DIcon.png}"></img></button>-->
<!--    <button id="show3DMap" class="mapSwitcherButton"><img th:src="@{/img/images/3DIcon.png}"> </img></button>-->
  </div>
</div>


<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="/js/bootstrap.min.js"></script>
<th:block th:include="include :: datetimepicker-js" />
<!-- 遮罩层 -->
<script src="/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="/ajax/libs/iCheck/icheck.min.js"></script>
<script src="/ajax/libs/layer/layer.min.js"></script>
<script src="/ajax/libs/layui/layui.js"></script>
<script src="/ruoyi/js/common.js?v=3.3.0"></script>
<script src="/ruoyi/js/ry-ui.js?v=3.3.0"></script>
<script> var ctx = "\/"; </script>
<!--<script src="../static/js/map/lib/jquery-1.8.3.js" th:src="@{/js/map/lib/jquery-1.8.3.js}"></script>-->
<!--<script src="../static/js/map/lib/jquery-1.8.3.js" th:src="@{/js/map/lib/jquery-1.8.3.js}"></script>-->
<script src="../static/js/map/lib/jquery.mousewheel.js" th:src="@{/js/map/lib/jquery.mousewheel.js}"></script>
<script src="../static/js/map/lib/Three-r75.js" th:src="@{/js/map/lib/Three-r75.js}"></script>
<script src="../static/js/map/lib/dat.gui.min.js" th:src="@{/js/map/lib/dat.gui.min.js}"></script>
<script src="../static/js/map/settings.js" th:src="@{/js/map/settings.js}"></script>
<script src="../static/js/map/map2D/Map2DInteractionManager.js" th:src="@{/js/map/map2D/Map2DInteractionManager.js}"></script>
<script src="../static/js/map/SelectionManager.js" th:src="@{/js/map/SelectionManager.js}"></script>
<script src="../static/js/map/NotificationManager.js" th:src="@{/js/map/NotificationManager.js}"></script>
<script src="../static/js/map/filtering/TagFilter.js" th:src="@{/js/map/filtering/TagFilter.js}"></script>
<script src="../static/js/map/filtering/KeywordTagFilter.js" th:src="@{/js/map/filtering/KeywordTagFilter.js}"></script>
<script src="../static/js/map/filtering/CoordinateSystemTagFilter.js" th:src="@{/js/map/filtering/CoordinateSystemTagFilter.js}"></script>
<script src="../static/js/map/map2D/Map2DController.js" th:src="@{/js/map/map2D/Map2DController.js}"></script>
<script src="../static/js/map/map3D/Map3DController.js" th:src="@{/js/map/map3D/Map3DController.js}"></script>
<script src="../static/js/map/TreeController.js" th:src="@{/js/map/TreeController.js}"></script>
<script src="../static/js/map/map2D/Viewport.js" th:src="@{/js/map/map2D/Viewport.js}"></script>
<script src="../static/js/map/map2D/GridDrawable.js" th:src="@{/js/map/map2D/GridDrawable.js}"></script>
<script src="../static/js/map/map2D/PolygonDrawable.js" th:src="@{/js/map/map2D/PolygonDrawable.js}"></script>
<script src="../static/js/map/map2D/TagDrawable.js" th:src="@{/js/map/map2D/TagDrawable.js}"></script>
<script src="../static/js/map/map2D/BackgroundImageDrawable.js" th:src="@{/js/map/map2D/BackgroundImageDrawable.js}"></script>
<script src="../static/js/map/map2D/InactiveAreaRendererDrawable.js" th:src="@{/js/map/map2D/InactiveAreaRendererDrawable.js}"></script>
<script src="../static/js/map/map3D/DomeControls.js" th:src="@{/js/map/map3D/DomeControls.js}"></script>
<script src="../static/js/map/map3D/Stats.js" th:src="@{/js//map/map3D/Stats.js}"></script>
<script src="../static/js/map/TagDataRetrieverTrack.js" th:src="@{/js/map/TagDataRetrieverTrack.js}"></script>
<script src="../static/js/map/main.js" th:src="@{/js//map/main.js}"></script>
<script src="../static/js/map/map2D/Map2D.js" th:src="@{/js/map/map2D/Map2D.js}"></script>
<script src="../static/js/map/alert/jquery-translucent.js" th:src="@{/js/map/alert/jquery-translucent.js}"></script>
<script>
  window.onload=function () {
    // $("#mapCanvas").top("10%");
    // $("#mapCanvas").height("90%");
    // tick();
  }
  $(document).ready(main);
  function openPersonInfo(tag) {
    var tagId = tag.id;
    var url = "/system/lable/getPersonInfoByTagId?tagId="+tagId;
    var config = {
      url: url,
      type: "post",
      dataType: "json",
      data: "",
      success: function(result) {
        var data = result.data;
        var sex = "";
        if (data.sex!=null&&data.sex!=""){
          sex = data.sex;
        }
        var sexName= "";
        if (sex!=null&&sex!=""){
          if (sex==0){
            sexName='男';
          } else if (sex==1){
            sexName='女';
          }
        }
        var personId = "";
        var personName="";
        var certificateNumber="";
        var deptName = "";
        if (data.personId!=null&&data.personId!=""){
          personId = data.personId;
        }
        if (data.personName!=null&&data.personName!=""){
          personName = data.personName;
        }
        if (data.certificateNumber!=null&&data.certificateNumber!=""){
          certificateNumber = data.certificateNumber;
        }
        if (data.deptName!=null&&data.deptName!=""){
          deptName = data.deptName;
        }
        var  html ="<ul align='left' style='padding-left: 20px;color: black'><li><a>人员编号：</a>"+personId+"</li><li><a>姓名：</a>"+personName+"</li><li><a>性别：</a>"+sexName+"</li><li><a>身份证：</a>"+certificateNumber+"</li><li><a>所属组织：</a>"+deptName+"</li></ul>";
        $("body").translucent({
          titleGroundColor:"#5396BA",
          backgroundColor:"#ffffff",
          titleFontColor:"#ffffff",
          titleFontSize:14,
          opacity:1,
          zIndex:100,
          textHtml:html,
          close:function ($dom) {
            // $.model.alert("确定要关闭吗？")
          }
        });
      }
    };
    $.ajax(config)

  }

  function showLocale(objD) {

    var str, colorhead, colorfoot;

    var yy = objD.getYear();

    if (yy < 1900) yy = yy + 1900;        var MM = objD.getMonth() + 1;

    if (MM < 10) MM = '0' + MM;        var dd = objD.getDate();

    if (dd < 10) dd = '0' + dd;        var hh = objD.getHours();

    if (hh < 10) hh = '0' + hh;        var mm = objD.getMinutes();

    if (mm < 10) mm = '0' + mm;        var ss = objD.getSeconds();

    if (ss < 10) ss = '0' + ss;        var ww = objD.getDay();

    if (ww == 0) colorhead = "";

    if (ww > 0 && ww < 7) colorhead = "";

    str = colorhead + yy + "年" + MM + "月" + dd + "日   " + hh + ":" + mm + ":" + ss + " ";

    return (str);

  }

  // function tick() {
  //   var today;
  //   today = new Date();
  //   var date_new = showLocale(today);
  //   $("#newDate").val(date_new);
  //   window.setTimeout("tick()", 1000);
  //
  // }
  /**
   * d : 字符串时间，格式为 yyyy-MM-dd HH:mm:ss
   * num : 秒
   * return : 返回 字符串 ，格式跟传入的相同
   */
  function dateAdd(d,num){
    var d = new Date(d.substring(0,4),
            d.substring(5,7)-1,
            d.substring(8,10),
            d.substring(11,13),
            d.substring(14,16),
            d.substring(17,19));
    d.setTime(d.getTime()+num*1000);
    //console.log(d.toLocaleString());
    return d.getFullYear()+"-"
            +(d.getMonth()+1)
            +"-"+d.getDate()
            +" "+d.getHours()
            +":"+d.getMinutes()
            +":"+d.getSeconds();
  }
  // function tick(startTime) {
  //
  // }
  var second ='2017-08-24 15:58:15';
  var beginTime=null;
  function track() {
    var startTime=$("#startTime").val();
    if (beginTime!=null){
      startTime = beginTime;
    }
    var endTime = $("#endTime").val();
    var tagId = $("#tagId").val();
    if (startTime==null||startTime==""){
      $.modal.msgWarning("请选择开始时间和结束时间！");
      return;
    }
    if (endTime==null||endTime==""){
      $.modal.msgWarning("请选择结束时间！");
      return;
    }
    if (tagId==null||tagId==""){
      $.modal.msgWarning("请选择标签ID！");
      return;
    }
    var date = new Date(startTime);
    var newDate = new Date(date.getTime() + 1000);
    var endTime = currentDate(newDate);
    showTag(startTime,endTime,tagId);
    $("#beginTime").val(endTime);
    beginTime=endTime;
    window.setTimeout("track()", 1000);
  }
  function currentDate(date){
    var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
    var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
    var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
    var hours = date.getHours();          //小时 ,返回 Date 对象的小时 (0 ~ 23)
    var minutes = date.getMinutes();      //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
    var seconds = date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)
    //修改月份格式
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    //修改日期格式
    if (day >= 0 && day <= 9) {
      day = "0" + day;
    }
    //修改小时格式
    if (hours >= 0 && hours <= 9) {
      hours = "0" + hours;
    }
    //修改分钟格式
    if (minutes >= 0 && minutes <= 9) {
      minutes = "0" + minutes;
    }
    //修改秒格式
    if (seconds >= 0 && seconds <= 9) {
      seconds = "0" + seconds;
    }
    //格式(yyyy-mm-dd hh:mm:ss)
    var currentFormatDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    return currentFormatDate;
  }

  function showTag(startTime,endTime,tagId) {
    var url = "/system/tagData/track";
    var param= {
      "beginTime":startTime,
      "tagId":tagId,
      "endTime":endTime
    }
    var config = {
      url: url,
      type: "post",
      dataType: "json",
      data: param,
      async: false,
      success: function(result) {
        var tagPositiont = result.data;
        parseTagInfos(tagPositiont, "", "");
        parseTagLocations(tagPositiont, "", "");
      }
    };
    $.ajax(config)
  }
</script>

</body>
</html>
